<template>
	<div class="tableBox margin-t-10">
		<div class="text-center margin-b-4 font-18">
			{{tableTitle}}
		</div>
		<table border="0" cellspacing="0" cellpadding="0" class="width100">
			<tr class="header">
				<td>序号</td>
				<td class="line">
					<div class="top text-right padding-r-10">指标</div>
					<div class="bottom text-left padding-l-10">科室</div>
				</td>
				<td>受理量<span class="block">（件）</span></td>
				<td>回复量<span class="block">（件）</span></td>
				<td>平均回复周期<span class="block">（工作日）</span></td>
				<template v-if="tableType=='zb'">
					<td>超期<span class="block">（件）</span></td>
					<td>回复周期</br>排名</td>
				</template>
				<template v-else>
					<td>满意率</td>
					<td>满意率</br>排名</td>
				</template>
			</tr>
			<tr v-for="(item,index) in tableData" :key="index">
				<td>{{index+1}}</td>
				<td>{{item.name}}</td>
				<td>{{item.sl}}</td>
				<td>{{item.hf}}</td>
				<td>{{item.hfzq}}</td>
				<template v-if="tableType=='zb'">
					<td>{{item.cq}}</td>
					<td>{{item.rank}}</td>
				</template>
				<template v-else>
					<td>{{item.myl}}</td>
					<td>{{item.rank}}</td>
				</template>
			</tr>
		</table>
		<div class="tips font-10 text-gray margin-t-6">
			此处超期指：办件时间超过4个工作日。
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			tableType: {
				type: String,
				default: ''
			},
			tableTitle: {
				type: String,
				default: ''
			},
			tableData: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				
			}
		}
	}
</script>

<style lang="less" scoped>
	table{
		border: 1px solid #000;
		tr{
			border-bottom: 1px solid #000;
			td{
				padding: 10px 0 10px 0;
			}
			.header{
				td:nth-child(1){
					width: 60px;
				}
				td:nth-child(2){
					width: 140px;
					text-align: left;
				}
				td .top{
					position: absolute;
					top: 10px;
					right: 20px;
				}
				td .bottom{
					position: absolute;
					bottom:10px;
					left: 3px;
				}
			}
			td{
				border-right: 1px solid #000000;
				position: relative;
				font-size: 12px;
				text-align: center;
			}
			td:last-child{
				border-right: none;
			}
		}
	} 
	.line {
		background: linear-gradient(to top right, white 49%, black, white 52%);
		// height: 60px;
		// position: relative;
		// background: linear-gradient(17deg, transparent 48.5%, #000 49.5%, #000 36.5%, transparent 50%);
	}
</style>
